<template>
  <div class="f f-ai-c f-jc-e" :class="className">
    <el-pagination
      :total="total"
      :page-size.sync="pageSize"
      :current-page.sync="currentPage"
      :page-sizes="sizes"
      :background="background"
      :layout="layout"
      :prev-text="prevText"
      :next-text="nextText"
      :disabled="disabled"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :class="{ 'is-srceen': srceen }"
    />
  </div>
</template>
<script>
import { scrollTo } from "@/utils/scroll-to";
export default {
  name: "Pagination",
  props: {
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
    // 每页显示条数
    limit: {
      type: Number,
      default: 10,
    },
    // 当前页
    page: {
      type: Number,
      default: 1,
    },
    // 背景色
    background: {
      type: Boolean,
      default: true,
    },
    // 组件布局 'prev, pager, next, jumper, ->, total'
    layout: {
      type: String,
      default: "prev, pager, next, jumper, ->, total",
    },
    // 选项设置
    sizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50],
    },
    // 上一页文字
    prevText: {
      type: String,
      default: "",
    },
    // 下一页文字
    nextText: {
      type: String,
      default: "",
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 回滚到顶部
    autoScroll: {
      type: Boolean,
      default: true,
    },
    // 自定义class
    className: {
      type: String,
      default: "mt20",
    },
    // 大屏分页
    srceen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      },
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      },
    },
  },
  methods: {
    // 切换条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
